<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" name="all"> <br>
    <input type="checkbox" name="one"> 
    <input type="checkbox" name="one"> 
    <input type="checkbox" name="one"> 
    <input type="checkbox" name="one"> 
    <input type="checkbox" name="one"> 
    <input type="checkbox" name="one"> <br>

    <img src="images/1.jpg"  width="100px" height="100px">

    <script>
        function testB(){
            
        }

        /**
         * 1、数组拍平
         *    [1,2,'a',3,'b',4,5,'c',6,'d',7]
         *  let arr = [1,2,['a',3,['b',4]],[5,'c',[6,['d',7]]]] 
         */ 
        function getWork1(){
            let elmArr = [1,2,['a',3,['b',4]],[5,'c',[6,['d',7]]]];
            let elmStrArr = elmArr.toString().split(',');
            let newArr = [];

            for(let elm of elmStrArr){
                let num = Number(elm);
                let newElm = isNaN(num) ? elm:num;
                newArr.push(newElm);
            }
            console.log(newArr);
        }
        getWork1();



         /**
          *  2、获取随机颜色
          *     十六进制颜色 '#45a6dc'
          *     rgb(0-255,0-255,0-255)
          */ 
        function getWork2(){
            // 随机获取十六进制颜色
            console.log(getRandomHexColor())

            // 随机获取RGB颜色
            console.log(getRandomRgbColor())
        }   
        getWork2();

        /**
         * 随机获取RGB颜色
         */ 
        function getRandomRgbColor(){
            let r = Math.floor(Math.random()*256);
            let g = Math.floor(Math.random()*256);
            let b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
    
        }

        /**
         * 随机获取十六进制颜色
         */ 
        function getRandomHexColor(){
            let str = '0123456789abcdef';
            let color = '#';
            for(let i = 0; i < 6; i++){
                let index = Math.floor(Math.random()*16);
                color = color.concat(str[index]);
            }
            return color;
        }


          /**
           * 3、全选全不选案例
           */ 
        function getWork3(){
            let allCheckBox = document.querySelector('input[name=all]');
            let itemCheckbox = document.querySelectorAll('input[name=one]')
            
            allCheckBox.addEventListener('change',function(){
                let isChecked = this.checked;
                console.log('all状态',isChecked);

                itemCheckbox.forEach((item)=>{
                    item.checked = isChecked;
                })
            });

            // 给子复选框添加监听事件
            itemCheckbox.forEach((checkbox)=>{
                checkbox.addEventListener('change',()=>{
                    let isChecked = true;

                    itemCheckbox.forEach((item)=>{
                        if(!item.checked){
                            isChecked = false;
                            allCheckBox.checked = false;
                        }
                        return;
                    })

                    if(isChecked){
                        allCheckBox.checked = true;
                    }
                })
            })
        }
        getWork3();
        

        /**
         * 4、图片切换
         * 
         */ 
        function getWork4(){
            let srcArr = ['images/1.jpg','images/2.jpg'];
            let imgElm = document.querySelector('img');

            let currIndex = 0;
            imgElm.src = srcArr[currIndex];

            setInterval(()=>{
                currIndex = (1 + currIndex) % srcArr.length;
                imgElm.src  = srcArr[currIndex];
            },2000);
        }

        getWork4();
    </script>


    
    
</body>
</html>